<div class="card-list">
  <div class="form flex flex-wrap items-center">
    <app-formly
      [fields]="content.form"
      [form]="form"
      [model]="model"
      (modelChange)="onModelChange($event)"
    />
    <app-btn
      (click)="onReload()"
      [content]="{
        label: '',
        mode: 'icon',
        color: 'primary',
        icon: { svg: 'reload' },
      }"
    />
  </div>
  <div class="lists">
    @if (loading) {
      <app-loading />
    }
    @if (content$ | async; as lists) {
      <app-dynamic-component
        [inputs]="{
          content: {
            type: content.params.use,
          },
          lists: lists,
          params: content.params,
          langs: langs,
          user: user,
        }"
      />
    }
  </div>
  @if (pager) {
    <div class="pager">
      <mat-paginator
        class="demo-paginator"
        (page)="onPageChange($event)"
        [length]="pager.totalItems"
        [pageSize]="pager.itemsPerPage"
        [showFirstLastButtons]="true"
        [hidePageSize]="true"
        [pageIndex]="pager.currentPage"
        aria-label="Select page"
      />
    </div>
  }
</div>
